<template>
  <div class="my-add-maker-box">
    <!-- <div class="my-point-box">
      <span>经度lng：</span>
      <a-input v-model:value="pointData.lng" :disabled="true" placeholder="请点击下面地图进行标注" />
      <span>纬度lat：</span>
      <a-input v-model:value="pointData.lat" :disabled="true" placeholder="请点击下面地图进行标注" />
    </div> -->
    <div class="my-map-box" id="map" :key="keyMap">
      <div class="my-map-search">
        <a-input-search v-model:value ="param.data.postStr.keyWord" placeholder="请输入地名" enter-button
          @change="searchHandle" />
        <div class="my-search-result" v-if="searchShow">
          <div v-if="searchResult.data == null" style="margin-left: 150px; font-size: 20px; color: #888;">暂无数据</div>
          <div v-else class="my-search-result-item" v-for="(item, index) in  searchResult.data" :key="index"
            @click="clickMarker(item)">{{ item.name }}
          </div>
        </div>
      </div>
      <div class="my-map-clear" @click="clearMarker">清除标注</div>
    </div>
  </div>
</template>
<script lang='ts' setup>

import { ref, reactive, onMounted } from 'vue'
//导入相关配置信息
import 'ol/css';
import { Map, View, Feature } from 'ol'
import { Style, Icon } from 'ol/style'
import { Point } from 'ol/geom';
import { Vector as SourceVec, XYZ, } from 'ol/source'
import { Vector as LayerVec } from 'ol/layer'
import TileLayer from 'ol/layer/Tile'
import { defaults as defaultControls, MousePosition, } from "ol/control"
import axios from 'axios'

defineOptions({
  name: 'markerMap',
});

// 接受参数
const props = defineProps({
  longitude: {
    type: String,
    required: false,
  },
  latitude: {
    type: String,
    required: false,
  },
  address: {
    type: String,
    required: false
  }
});

let myMap: any = null
let myView: any = null
let keyMap: any = ref(Math.random())
let vectorLayer: any = null
let searchResult = reactive({ data: null })
let searchShow = ref(false)
let pointData = reactive({ lng: '', lat: '' })

// url
const url = ref('http://api.tianditu.gov.cn/v2/search')
// 参数
let param = reactive({
  data: {
    postStr: {
      keyWord: '',
      level: 18,
      mapBound: "116.02524,39.83833,116.65592,39.99185",
      queryType: 1,
      start: 0,
      count: 10,
    },

  }
})
onMounted(() => {
  setTimeout(() => {
    myMap = new Map({
      target: 'map',
      //图层数组 layers
      layers: [
        new TileLayer({
          source: new XYZ({
            crossOrigin: 'anonymous',
            url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=a90f06c20cbb05850b3d514b6d11318a'
          })
        }),
        new TileLayer({
          source: new XYZ({
            crossOrigin: 'anonymous',
            url: 'https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=a90f06c20cbb05850b3d514b6d11318a'
          })
        })
      ],
      //视图 View
      view: new View({
        projection: "EPSG:4326",
        center: [109.83, 40.65],
        zoom: 11,
        maxZoom: 17,
        minZoom: 1,
      }),
      //默认控件
      controls: defaultControls({
        zoom: false,
        rotate: false,
        attribution: false,
      }).extend([
        //添加新控件
        // new MousePosition(),
      ])
    })

    // 获取地图视图
    myView = myMap.getView()
    setMarker([props.longitude, props.latitude ])
    myMap.on('singleclick', function (e: any) {
      setMarker(e.coordinate)
    })
    param.data.postStr.keyWord = props.address || '';
  }, 1);
})
// 标注点
const setMarker = (point: any) => {
  //移出给定的图层
  myMap.removeLayer(vectorLayer)
  // 创建矢量容器
  let vectorSource = new SourceVec({})
  //创建图标特性
  let iconFeature = new Feature({
    geometry: new Point(point, "XY")
  })
  //将图标特性添加进矢量中
  vectorSource.addFeature(iconFeature)
  //创建图标样式
  let iconStyle = new Style({
    image: new Icon({
      opacity: 0.75,
      src: require('@/assets/images/marker-icon.png'),
      // offset: [-20, -40],
      // offsetOrigin: 'bottom-right',
      size: [30, 65]
    })
  })
  //创建矢量层
  vectorLayer = new LayerVec({
    source: vectorSource,
    style: iconStyle
  }); //添加进map
  // removeLayer
  myMap.addLayer(vectorLayer);
  searchShow.value = false
  pointData.lng = point[0]
  pointData.lat = point[1]
  // 传递坐标
  emits("bindEvent", pointData.lng, pointData.lat, param.data.postStr.keyWord);
  param.data.postStr.keyWord = ''
}
// 清除标注点
const clearMarker = () => {
  //移出给定的图层
  myMap.removeLayer(vectorLayer)
  pointData.lng = ''
  pointData.lat = ''
  emits("bindEvent", pointData.lng, pointData.lat);

}

const emits = defineEmits(["bindEvent"]);

// 点中某个结果
const clickMarker = (item: object) => {
  setMarker(item.lonlat.split(','))
  myView.setCenter(item.lonlat.split(','))
  param.data.postStr.keyWord = ''
  searchShow.value = false

}

//搜索
const searchHandle = () => {
  // 地名查询
  let params = {postStr: JSON.stringify( param.data.postStr), type: 'query',
    tk: 'a90f06c20cbb05850b3d514b6d11318a'}
  axios({
    method: 'GET',
    url: url.value,
    params: params
  }).then(function (res) {
    searchShow.value = true
    if (res.data.pois) {
      searchResult.data = res.data.pois
    } else {
      searchResult.data = null
    }
  })
}

</script>
<style scoped lang='less'>
.my-add-maker-box {

  width: 100%;
  height: 100%;
  min-width: 900px;

  // border: 1px solid #eee;
  .my-point-box {
    width: 900px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

    span {
      display: inline-block;
      width: 200px;
    }
  }

  .my-map-box {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
    z-index: 1;

    .my-map-search {
      position: absolute;
      top: 5px;
      left: 10px;
      z-index: 99;

      .my-search-result {
        position: absolute;
        top: 33px;
        left: 0;
        z-index: 999;
        width: 371px;
        max-height: 260px;
        border: 1px solid #eee;
        box-sizing: border-box;
        background-color: #fff;
        overflow: auto;
        padding: 10px 0;

        .my-search-result-item {
          width: 100%;
          padding: 8px 15px;
          box-sizing: border-box;
          cursor: pointer;

          &:hover {
            background-color: #eee;
          }
        }
      }
    }

    .my-map-clear {
      position: absolute;
      bottom: 10px;
      left: calc(50% - 45px);
      z-index: 999;
      width: 90px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #dcdfe6;
      background-color: #f5f7fa;
      border-radius: 3px;
      cursor: pointer;
      color: #909399;

      &:hover {
        background-color: #ecf5ff;
        color: #409eff;
      }
    }

    /deep/ .el-input-group {
      width: 371px;
    }
  }
}
</style>
